<template>
  <div class="courseware-wrapper">
    <div class="courseware-box">
      <div class="courseware-header">
        <h4 class="title">推荐课件</h4>
        <el-link
          class="more-link"
          :href="module.props.moreUrl || '#/more-coursewares'"
          target="_blank"
          type="primary"
        >
          更多 <i class="el-icon-arrow-right"></i>
        </el-link>
      </div>

      <el-row :gutter="10">
        <el-col
          v-for="(course, index) in module.props.coursewares"
          :key="index"
          :span="parseInt(module.props.coursewareTypesetting) || 12"
        >
          <a
            :href="course.url"
            target="_blank"
            class="courseware-card"
            rel="noopener noreferrer"
          >
            <img :src="course.image" alt="course.title" />
            <div class="course-title">{{ course.title }}</div>
          </a>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
export default {
  name: 'CoursewareModule',
  props: ['module']
};
</script>

<style scoped>
.courseware-wrapper {
  background-color: rgb(242, 246, 252);
  padding: 12px;
  box-sizing: border-box;
}

.courseware-box {
  background: #fff;
  border-radius: 8px;
  padding: 12px 16px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
}

.courseware-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.title {
  font-size: 16px;
  margin: 0;
}

.more-link {
  font-size: 13px;
}

.courseware-card {
  display: block;
  background: #fafafa;
  border-radius: 6px;
  overflow: hidden;
  text-align: center;
  padding: 8px;
  transition: transform 0.2s ease;
  text-decoration: none;
  color: #333;
}

.courseware-card:hover {
  transform: translateY(-2px);
}

.courseware-card img {
  width: 100%;
  height: 100px;
  object-fit: cover;
  border-radius: 4px;
}

.course-title {
  font-size: 14px;
  margin-top: 6px;
}
</style>